<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Kekule.js Tutorial Example: Object System</title>
  <script src="libs/kekule/kekule.js?modules=core"></script>
  <script>
    // Create new Class
    var MyCustomAtom = Class.create(Kekule.Atom, { // Creating a new class deprived from Kekule.Atom
      CLASS_NAME: 'MyCustomAtom',                  // Explicitly set the name of class
      initialize: function($super, id)             // Method initialize will be regarded as constructor of class
      {
        $super(id);                                // Use $super parameter to call inherited method from ancestor class
        this._customText = 'My value';
      },
      initProperties: function()                   // Special method, defining new properties of class
      {
        this.defineProp('myProperty', {            // defining integer property: myProperty
          'dataType': DataType.INT,
          'getter': function() {
            console.log('Reading myProperty');     // additional operation in property getter
            return this.getPropStoreFieldValue('myProperty');  // return value from default storing field of object
          },
          'setter': function(value)
          {
            console.log('Writing myProperty');     // additional operation in property setter
            this.setPropStoreFieldValue('myProperty', value);  // set value to default storing field of object
          }
        });
        this.defineProp('customText', {            // defining string property: customField
          'dataType': DataType.STRING,
          'getter': function() { return this._customText; },      // return value from a custom storing field
          'setter': function(value) { this._customText = value; } // set value to a custom storing field
        });
      },
      showNewPropertyValues: function()            // defining new method
      {
        console.log(this.getMyProperty(), this.getCustomText());
      }
    });

    // Create instance of Class
    var myInstance = new MyCustomAtom('myId');  // create new instance
    myInstance.setMyProperty(10).setCustomText('Custom Text');  // set property values
    myInstance.setSymbol('Cl');   // set property value inherited from ancestor classes
    console.log(myInstance.getAtomicNumber());  // get property value inherited from ancestor classes
    var dupInstance = myInstance.clone();        // access inherited method
    console.log(
      dupInstance.getSymbol(),
      dupInstance.getMyProperty(),
      dupInstance.getCustomText()
    );

    // serialize/deserialize instance
    var jsonData = {};
    myInstance.saveObj(jsonData, 'json');
    var newInstance = new MyCustomAtom();
    newInstance.loadObj(jsonData, 'json');
    console.log(
      newInstance.getSymbol(),
      newInstance.getMyProperty(),
      newInstance.getCustomText()
    );
  </script>
</head>
<body>
  <h1>Kekule.js Tutorial Example: Object System</h1>
  <p>Open the console of web browser (usually by pressing F12) to see the output.</p>
</body>
</html>